<template>
<!-- 申请调岗 -->
    <div class="job">
      <div class="nav-bar">
          <div class="icon-left" @click="clickGoBackHandle"><van-icon  class="icon" name="arrow-left" />{{changeData.back}}</div>
          <div class="nav-title">{{changeData.title}}</div>
      </div>
      <div class="job-event" >{{changeData.selectOne}}<div  class="icon">请选择<van-icon class="next" name="arrow"/></div></div>
      <div class="job-event" >{{changeData.selectTwo}}<div  class="icon">请选择<van-icon class="next" name="arrow"/></div></div>
      <div class="job-event" >{{changeData.selectThree}}<div  class="icon">请选择<van-icon class="next" name="arrow"/></div></div>
      <div class="reason"> <textarea   class="text"  rows="10">申请原因</textarea> </div>
      <div class="submit">{{changeData.submit}}</div>
  </div>
</template>

<script>
export default {
name:'ApplyTransfer',
data(){
    return{
        changeData:{
            back:'岗位调动',
            title:'申请调岗',
            selectOne:'所属部门',
            selectTwo:'现属岗位',
            selectThree:'申请岗位',
            reason:'申请原因',
            submit:'确认提交'
        }
    }
},
methods:{
    clickGoBackHandle(){
        this.$router.back()
    },

}
}
</script>

<style scoped lang="less">
.job{
    .nav-bar{
        height: 1.3rem;
        line-height:1.3rem;
        background-color: #fff;
        color:#000;
        position: relative;
        .icon-left{
            float:left;
            color:#4e90ff;
            margin-left:0.7rem;   
            .icon{
                position:absolute;
                top:0.35rem;
                left:0.06rem;
                font-size: 30px;
            }
        }
        .nav-title{
            float:left;
            margin-left: 1.3rem;
            font-weight:600;
            letter-spacing: 1px;
        }
    }
    .job-event{
        margin-top:20px;
        height:0.9rem;
        line-height:0.9rem;
        font-weight: 600;
        background-color: #fff;
        padding-left:0.2rem;
        box-shadow: 0 0 1px;
        position:relative;
        .icon{
            float:right;
            margin-right:0.6rem;
            color:#999;
            .next{
                font-size:25px;
                position:absolute;
                top:0.18rem;
                right:0.1rem;
            }
        }
    }
    .reason{
        margin-top:20px;
        box-shadow: 0 0 1px;
        width:100%;  
         box-sizing: border-box;
        .text{
            border:none;
            width:99%;
            overflow: auto;
            word-break: break-all;
            padding-left:0.2rem;
            font-weight: 600;
            padding-top:10px; 
            box-sizing: border-box;      
        }
    }
    .submit{
        position:absolute;
        bottom:0;
        left:0;
        height:1.1rem;
        width:100%;
        background-color:#4e90ff;
        text-align: center;
        line-height: 1.1rem;
        font-weight:600;
        letter-spacing: 1px;
        color:#fff;
    }
}
</style>